<template>
<view class="container">
  <scroll-view
	refresher-enabled
	:refresher-triggered="isRefreshing"
	@refresherrefresh="onRefresh"
  >
	<!-- 用户信息区域 -->
	<view class="user-info" @tap="showActionSheet">
	  <image class="avatar" :src="user.image" mode="aspectFill"></image>
	  <view class="info">
		<text class="nickname">{{ user.username }}</text>
		<br/>
		<text class="phone">{{ user.phone }}</text>
	  </view>
	  <view class="stars-space">
		<view class="star star-a"></view>
		<view class="star star-b"></view>
		<view class="star star-c"></view>
		<view class="star star-d"></view>
		<view class="star star-e"></view>
		<view class="star star-f"></view>
		<view class="star star-g"></view>
		<view class="star star-h"></view>
	  </view>
	</view>
		
	<!-- 我的订单 -->
	<view class="order-section">
	  <view class="section-header">
		<text class="title">我的订单</text>
		<text style="font-size: 26rpx;color: #999;" @tap="navigateTo('/pages/address/list')">地址管理</text>
	  </view>
	  <view class="order-types">
		<view 
		  class="type-item" 
		  v-for="(item, index) in orderTypes" 
		  :key="index"
		  @click="navigateTo(item.page)"
		>
		  <view class="badge" v-if="item.orderCounts > 0">{{ item.orderCounts }}</view>
		  <text class="iconfont" :class="item.icon"></text>
		  <text class="type-name">{{ item.name }}</text>
		</view>
	  </view>
	</view>
		
	<!-- 最近订单 -->
	<view class="recent-orders">
	  <view class="section-header">
			<text class="title">最近订单</text>
	  </view>
	  <view class="order-list">
			<view class="order-item" v-for="(order, index) in recentOrders" :key="index">
			  <view class="order-info">
				<view class="order-time">下单时间：{{ order.orderTime || "--" }}</view>
				<view class="order-status" :class="getColor(order.status)">{{ order.status }}</view>
			  </view>
			  <view class="order-content">
				<scroll-view scroll-x class="images-scroll" :show-scrollbar="false">
				  <view class="images-container">
					<image 
					  v-for="(product, pIndex) in order.products" 
					  :key="pIndex"
					  :src="product" 
					  mode="aspectFill" 
					  class="product-image"
					></image>
				  </view>
				</scroll-view>
				<view class="order-detail">
				  <view class="order-amount">
					<text>订单金额</text>
					<text class="price">¥{{ order.finalPrice }}</text>
				  </view>
				  <view class="delivery-time">送达时间：{{ order.deliveryTime || "--" }}</view>
				</view>
			  </view>
			</view>
	  </view>
	</view>


    <!-- 底部操作菜单 -->
    <u-action-sheet
      :show="showActions"
      :actions="actions"
      @close="closeActionSheet"
      @select="handleSelect"
      cancelText="取消"
    />
   </scroll-view>
</view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app'
import { ref, onMounted, onUnmounted } from 'vue'
import { UserUtils } from '../../utils/userUtils'
import { logout } from '../../utils/baseUtils'
import { CardUtil } from '../../utils/cartUtils'

onShow(() => {
	// 重置 CatBar
	CardUtil.initCatBar()
	// 从缓存中获取登录数据
	user.value = UserUtils.getUser()
	// 获取订单信息
	UserUtils.recent(data => {
		recentOrders.value = data.items
		// 更新数据
		orderTypes.value[0].orderCounts = data.waitPaidCount
		orderTypes.value[1].orderCounts = data.waitDeliveryCount
		orderTypes.value[2].orderCounts = data.waitReceivingCount
		orderTypes.value[3].orderCounts = data.completedCount
	})
})

// 是否正在刷新
const isRefreshing = ref(false)
// 最近订单数据
const recentOrders = ref([])

// 下拉刷新
const onRefresh = async () => {
  isRefreshing.value = true
  // 模拟刷新数据
  UserUtils.reloadRecent(data => {
	  recentOrders.value = data.items
	  // 更新数据
	  orderTypes.value[0].orderCounts = data.waitPaidCount
	  orderTypes.value[1].orderCounts = data.waitDeliveryCount
	  orderTypes.value[2].orderCounts = data.waitReceivingCount
	  orderTypes.value[3].orderCounts = data.completedCount
	  // 关闭刷新
	  isRefreshing.value = false
  })
}

// 订单类型数据
const orderTypes = ref([
  {
    name: '待付款',
    icon: 'icon-daifukuan',
    orderCounts: 0,
    page: '/pages/order/detail'
  },
  {
    name: '待发货',
    icon: 'icon-daifahuo',
    orderCounts: 0,
    page: '/pages/order/unshipped'
  },
  {
    name: '配送中',
    icon: 'icon-sending',
    orderCounts: 0,
    page: '/pages/order/shipping'
  },
  {
    name: '已完成',
    icon: 'icon-yiwancheng',
    orderCounts: 0,
    page: '/pages/order/completed'
  }
])

// 登录数据
const user = ref({})

// 控制操作菜单显示
const showActions = ref(false)

const getColor = (status) => {
	if (status == '待支付') return "wait_paid"
	if (status == '待发货') return "wait_delivery"
	if (status == '配送中') return "wait_receiving"
	if (status == '已完成') return "completed"
}

// 操作菜单选项
const actions = [
  { name: "修改名称", color: 'black' },
  { name: "切换头像", color: 'black' },
  { name: '退出登录', color: '#ff5062' }
]

// 通用导航方法
const navigateTo = (url) => {
  uni.navigateTo({ url })
}

// 显示操作菜单
const showActionSheet = () => {
  showActions.value = true
}

// 关闭操作菜单
const closeActionSheet = () => {
  showActions.value = false
}

// 处理菜单选择
const handleSelect = (e) => {
  // 点击修改名称，弹出一个输入框
  if (e.name === '修改名称') {
    uni.showModal({title: '修改名称', content: '', placeholderText: '请输入新的名称', editable: true,
      success: (res) => {
        if (res.confirm) {   
          if (res.content.length <= 1) uni.showToast({title: "名称至少2个字", icon: "none"})
          else {UserUtils.rename(res.content , data => {user.value.username = data})}
        }
      }
    })
  }
  // 点击切换头像，弹出一个选择图片的弹窗
  else if (e.name === '切换头像') {
    uni.chooseImage({
      count: 1,
      success: (res) => {UserUtils.avatar(res.tempFilePaths[0], data => {user.value.image = data})}
    })
  }
  // 退出登录
  else if (e.name === '退出登录') {
    uni.showModal({title: '提示', content: '确定要退出登录吗？',
      success: (res) => {if (res.confirm) logout()}
    })
  }
  closeActionSheet()
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 90vh;
  background-color: #f7f7f7;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background: url('http://192.168.1.82:80/images/user-background.jpg') center/cover;
  position: relative;
  overflow: hidden;
  
  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(255, 255, 255, 0.8);
    position: relative;
    z-index: 1;
  }
  
  .info {
    margin-left: 20rpx;
    position: relative;
    z-index: 1;
    
    .nickname {
      font-size: 38rpx;
      font-family: 'Arial', sans-serif;
      color: #ffffff;
      text-shadow: 
        0 0 10rpx rgba(88, 88, 88, 0.8),
        0 0 20rpx rgba(159, 158, 158, 0.5),
        0 0 30rpx rgba(255, 255, 255, 0.3);
      font-weight: bold;
      letter-spacing: 4rpx;
      margin-bottom: 12rpx;
      position: relative;
      display: inline-block;
      
      &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -4rpx;
        height: 2rpx;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.8),
          transparent
        );
        animation: shimmer 2s infinite;
      }
    }
    
    .phone {
      font-size: 25rpx;
      font-family: 'Helvetica Neue', sans-serif;
      color: rgba(255, 255, 255, 0.9);
      letter-spacing: 2rpx;
      text-shadow: 
        0 0 8rpx rgba(255, 255, 255, 0.6),
        0 0 16rpx rgba(255, 255, 255, 0.3);
      position: relative;
      display: inline-block;
      
      &::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        right: -10%;
        bottom: -50%;
        background: radial-gradient(
          circle at center,
          rgba(255, 255, 255, 0.2),
          transparent
        );
        animation: glow 3s infinite;
      }
    }
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  
  .title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
  }
  
  .more {
    font-size: 26rpx;
    color: #999;
  }
}

.order-section, .common-section {
  margin-top: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  
  .order-types, .function-list {
    display: flex;
    padding: 20rpx 0;
    
    .type-item, .function-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      
      .iconfont {
        font-size: 48rpx;
        color: #ff5062;
        margin-bottom: 12rpx;
      }
      
      .type-name, .function-name {
        font-size: 26rpx;
        color: #666;
      }
      
      .badge {
        position: absolute;
        top: 10rpx;
        right: 70rpx;
        transform: translateX(20rpx);
        background: #ff5062;
        color: #fff;
        font-size: 20rpx;
        padding: 0 8rpx;
        height: 28rpx;
        min-width: 28rpx;
        border-radius: 14rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.recent-orders {
  margin-top: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  padding-bottom: 120rpx;
  
  .order-list {
    .order-item {
      padding: 20rpx 30rpx;
      border-bottom: 2rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .order-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
        
        .order-time {
          font-size: 26rpx;
          color: #666;
        }
        
        .order-status {
          font-size: 26rpx;
          
          &.wait_paid {
            color: #ff5062;
          }
          
          &.wait_delivery {
            color: #ff9c0f;
          }
		  
		  &.wait_receiving {
			  color: #5098FF;
		  }
		  
		  &.completed {
			  color: #19be6b;
		  }
        }
      }
      
      .order-content {
        display: flex;
        flex-direction: column;
        gap: 16rpx;
        
        .images-scroll {
          width: 100%;
          white-space: nowrap;
          
          .images-container {
            display: inline-flex;
            padding: 4rpx 0;
            
            .product-image {
              width: 140rpx;
              height: 140rpx;
              border-radius: 8rpx;
              margin-right: 12rpx;
              background: #f8f8f8;
              flex-shrink: 0;
              
              &:last-child {
                margin-right: 0;
              }
            }
          }
        }
        
        .order-detail {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          
          .order-amount {
            display: flex;
            align-items: baseline;
            gap: 8rpx;
            font-size: 26rpx;
            color: #666;
            
            .price {
              font-size: 26rpx;
              color: #ff5062;
              font-weight: 500;
            }
          }
          
          .delivery-time {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
}

// 隐藏滚动条
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

.order-types {
  .type-item {
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20rpx 0;
    
    &.active {
      transform: scale(0.88);
      
      .iconfont {
        transform: scale(1.2);
        filter: brightness(1.2);
        color: #ff3a4c;
      }
      
      .type-name {
        transform: scale(0.92);
        opacity: 0.7;
        color: #ff3a4c;
      }
      
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 20%;
        right: 20%;
        bottom: 0;
        background: rgba(255, 80, 98, 0.1);
        border-radius: 16rpx;
        pointer-events: none;
        animation: ripple 0.6s ease-out;
      }
    }
    
    .iconfont {
      font-size: 52rpx;
      color: #ff5062;
      margin-bottom: 12rpx;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform, filter, color;
    }
    
    .type-name {
      font-size: 26rpx;
      color: #666;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform, opacity, color;
    }
    
    .badge {
      position: absolute;
      top: 4rpx;
      right: 65rpx;
      transform: translateX(20rpx);
      background: linear-gradient(135deg, #ff6b81, #ff4757);
      color: #fff;
      font-size: 20rpx;
      padding: 0 8rpx;
      height: 28rpx;
      min-width: 28rpx;
      border-radius: 14rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2rpx 6rpx rgba(255, 71, 87, 0.3);
      animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      will-change: transform;
    }
  }
}

// 添加水波纹动画
@keyframes ripple {
  0% {
    transform: scale(0.5);
    opacity: 0.4;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

// 优化徽标动画
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translateX(20rpx) scale(0.3);
  }
  50% {
    opacity: 0.8;
    transform: translateX(20rpx) scale(1.2);
  }
  70% {
    opacity: 0.9;
    transform: translateX(20rpx) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(20rpx) scale(1);
  }
}

// 光效动画
@keyframes shimmer {
  0%, 100% {
    opacity: 0.5;
    transform: scaleX(0.8);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes glow {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(-50%);
  }
  25% {
    opacity: 0.5;
    transform: scale(1.05) translateY(-45%);
  }
  50% {
    opacity: 0.2;
    transform: scale(1) translateY(-50%);
  }
  75% {
    opacity: 0.5;
    transform: scale(1.05) translateY(-55%);
  }
  100% {
    opacity: 0;
    transform: scale(0.95) translateY(-50%);
  }
}

.stars-space {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.star {
  display: block;
  width: 1px;
  background: transparent;
  position: relative;
  opacity: 0;
  animation: star-ani 2s linear infinite;
  
  &::after {
    content: '';
    display: block;
    border: 0 solid transparent;
    border-width: 0 90rpx 5rpx 90rpx;
    border-bottom-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 5rpx rgba(255, 255, 255, 0.3);
    transform: rotate(-45deg) translate3d(1rpx, 3rpx, 0);
    transform-origin: 0% 100%;
  }
}

.star-a {
  top: -30rpx;
  left: 20%;
}

.star-b {
  top: 60rpx;
  left: 24%;
  animation-delay: 4s;
}

.star-c {
  top: 40rpx;
  left: 60%;
  animation-duration: 3s;
  animation-delay: 1s;
}

.star-d {
  top: -30rpx;
  left: 80%;
  animation-delay: 2s;
}

.star-e {
  top: 40rpx;
  left: 86%;
  animation-duration: 4s;
  animation-delay: 1s;
}

.star-f {
  top: -200rpx;
  left: 60%;
  animation-duration: 4s;
}

.star-g {
  top: -150rpx;
  left: 90%;
  animation-duration: 3s;
}

.star-h {
  top: -150rpx;
  left: 15%;
  animation-duration: 2.5s;
}

@keyframes star-ani {
  0% {
    opacity: 0;
    transform: scale(0.1) translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(-100rpx, 100rpx, 0);
  }
  100% {
    opacity: 0;
    transform: scale(1.2) translate3d(-300rpx, 300rpx, 0);
  }
}
</style> 